<template>
  <el-table
    header-row-class-name="base-table-header-v3"
    row-class-name="base-table-row-v3"
    class="multiple-card-table"
    :data="disposeFormListViewTime(data, columns)"
    border>
    <el-table-column
      v-for="column in columns"
      :key="column.fieldId"
      :label="column.displayName"
      :prop="column.fieldName"
      show-overflow-tooltip
      :min-width="column.minWidth || '120px'">
      <template slot-scope="scope">
        <!-- start 附件类型 -->
        <template v-if="column.formType === 'attachment'">
          <span class="column-attachment" v-if="scope.row[column.fieldName] && scope.row[column.fieldName].length">
            <i class="iconfont icon-attachment"></i>
            {{$t('task.detail.components.attachmentNum', {num: scope.row[column.fieldName].length})}}
          </span>
        </template>
        <!-- end 附件类型 -->

        <!-- start 多选 -->
        <template v-else-if="isMulti(column)">
          {{ (scope.row[column.fieldName] || []).join('，') }}
        </template>
        <!-- end 多选 -->

        <!-- start 位置 -->
        <template v-else-if="column.fieldName === 'location'">
          <el-button
            type="text"
            size="mini"
            v-if="scope.row.fromType == 2"
            @click="handleEvent('location', scope.row)"
          >{{$t('common.base.view')}}</el-button>
        </template>
        <!-- end 位置 -->
        
        <template v-else-if="column.formType === 'user'">
              
          <template v-if="isOpenData">
            <template v-if="Array.isArray(scope.row[column.fieldName])">
              <open-data v-for="item in scope.row[column.fieldName]" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
            </template>
            <template v-else>
              <open-data type="userName" :openid="scope.row[column.fieldName] && scope.row[column.fieldName].staffId"></open-data>
            </template>
          </template>
              
          <template v-else>
            {{ $formatFormField(column, scope.row) }}
          </template>
          
        </template>
        
        <!-- start 操作人 -->
        <template v-else-if="column.fieldName === 'userName'">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="scope.row.staffId"></open-data>
          </template>
          
          <template v-else>
            {{ scope.row[column.fieldName] }}
          </template>
        </template>
        <!-- end 操作人 -->
        
        <!-- start 操作人 -->
        <template v-else-if="column.fieldName === 'operatorName'">
          <template v-if="isOpenData">
            <open-data type="userName" :openid="scope.row.operatorStaffId"></open-data>
          </template>
          
          <template v-else>
            {{ scope.row[column.fieldName] }}
          </template>
        </template>
        <!-- end 操作人 -->

        <!-- start 操作时间 -->
        <template v-else-if="column.fieldName === 'updateTime'">
          {{ scope.row[column.fieldName] | fmt_datetime }}
        </template>
        <!-- end 操作时间 -->

        <!-- start 操作 -->
        <template v-else-if="column.fieldName === 'action'">
          <el-dropdown class="dropdown" v-if="needDropdown">
            <span class="cur-point">
              {{$t('common.base.more')}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
              <el-dropdown-item><div @click="handleEvent('view', scope.row)">{{$t('common.base.detail')}}</div></el-dropdown-item>
              <el-dropdown-item><div v-if="allowEdit" @click="handleEvent('edit', scope.row)">{{$t('common.base.edit')}}</div></el-dropdown-item>
              <el-dropdown-item><div v-if="allowDelete" @click="handleEvent('delete', scope.row)">{{$t('common.base.delete')}}</div></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>
            <el-button
              type="text"
              size="mini"
              @click="handleEvent('view', scope.row)"
            >{{$t('common.base.detail')}}</el-button>
          </div>
        </template>
        <!-- end 操作 -->

        <template v-else>
          {{ $formatFormField(column, scope.row) }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
/* util */
import { isOpenData } from '@src/util/platform';
import { useFormTimezone } from 'pub-bbx-utils'
const { disposeFormListViewTime } = useFormTimezone()

export default {
  name: 'card-table',
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array,
      default: () => ([])
    },
    allowEdit: {
      type: Boolean,
      default: false
    },
    allowDelete: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      isOpenData
    }
  },
  computed: {
    needDropdown() {
      return this.allowEdit || this.allowDelete
    }
  },
  methods: {
    disposeFormListViewTime,
    /** 
    * @description 字段是否是多选类型
    */
    isMulti(field) {
      let { formType, setting = {}} = field;
      if (formType === 'selectMulti') return true;
      if (formType === 'select' && setting.isMulti) return true;
      return false;
    },

    /** 
    * @description 附加组件操作
    */
    handleEvent(action, row) {
      this.$emit('action', action, row);
    }
  }
}
</script>

<style lang="scss">
.multiple-card-table {
  .base-table-row-v3 td {
    .column-attachment {
      .iconfont {
        font-size: 12px;
      }
    }

    .el-button {
      min-width: auto !important;
      padding: 0;
    }
  }
  .cur-point {
    color: $color-primary-light-6;
  }
}
.lang-select-dropdown {
  margin-top: 0!important;
}
</style>
